<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
const dialogVisible = ref(false);
const formRef = ref<FormInstance>();
const formValue = reactive({
  apiKeyName: '',
  apiKeyDesc: '',
});
const rules = reactive<FormRules>({
  apiKeyName: [{ required: true, message: '请输入密钥名称', trigger: 'blur' }],
});

const emit = defineEmits(['add']);

function onCancel() {
  dialogVisible.value = false;
}

async function onSubmit() {
  if (!formRef.value) return;
  const valid = await formRef.value?.validate(() => {});
  if (!valid) {
    return;
  }
  dialogVisible.value = false;
  emit('add', formValue);
}

function open() {
  formRef.value?.resetFields();
  dialogVisible.value = true;
}

defineExpose({ open });
</script>
<template>
  <el-dialog v-model="dialogVisible" title="新增API密钥" width="500">
    <div class="form">
      <el-form ref="formRef" label-position="top" :model="formValue" :rules="rules">
        <el-form-item label="密钥名称" prop="apiKeyName">
          <el-input v-model="formValue.apiKeyName" maxlength="15" />
        </el-form-item>
        <el-form-item label="密钥描述" prop="apiKeyDesc">
          <el-input v-model="formValue.apiKeyDesc" type="textarea" :rows="3" maxlength="60" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="less">

</style>
